<template>
	<view class="main">
		<view class="form">
			<view class="item flex" style="height: 170rpx;">
				<view class="name" > 银行卡照片：</view>
				<view style="padding-left: 232rpx;">
					<u-upload
							:fileList="form.bank_card_image"
							:sizeType="sizeType"
							@afterRead="afterRead"
							@delete="deletePic"
							name="bank_card_image"
							multiple
							maxCount="1"
							width="200rpx"
							height="140rpx"
						>
						<image src="/static/image/icon/photo.png" mode="widthFix" style="width: 200rpx;height: 140rpx;"></image>
						</u-upload>
				</view>
			
			</view>
		<view class="item flex">
			<view class="name"> 开户名：</view>
			<input type="text" v-model="form.bank_account_name" placeholder="请输入开户姓名">
		</view>
		<view class="item flex">
			<view class="name"> 银行卡号：</view>
			<input type="text" v-model="form.bank_no" placeholder="请输入银行卡号">
		</view>
		<view class="item flex" @click="showPop">
			<view class="name"> 开户银行： </view>
			<input type="text" disabled v-model="bankText" placeholder="请选择开户银行,未找到的开户行请联系人事">
			<lzcPicker ref="lzcPicker" @change="bindPickerChange1" :pickerList="bankList" pickerTittle='选择开户银行' />
			<uni-icons type="right" ></uni-icons>
		</view>
		<view class="item flex">
			<view class="name"> 支行名称：</view>
			<input type="text" v-model="form.bank_opening" placeholder="请输入支行名称">
		</view>
		<view class="item flex" style="height: 120rpx;">
			<view class="name"> 更换原因：</view>
			<!-- <u--textarea v-model="form.apply_note" placeholder="请输入更换原因" autoHeight ></u--textarea> -->
			<textarea style="height: 95rpx;text-align:left;margin-top:10rpx;font-size: 0.72rem!important;padding-right:30rpx" v-model="form.apply_note" id="" cols="30" rows="10"></textarea>
			<!--<input type="text" v-model="form.bank_opening" placeholder="请输入更换原因">-->
		</view>
		<view class="item flex" style="height: 170rpx;" v-if="proveShow">
			<view class="name" > 代收证明：</view>
			<view>
				<u-upload
						:fileList="form.collecting_prove"
						:sizeType="sizeType"
						@afterRead="afterRead"
						@delete="deletePic"
						name="collecting_prove"
						multiple
						maxCount="2"
						width="200rpx"
						height="140rpx"
					>
					<image src="/static/image/icon/photo.png" mode="widthFix" style="width: 200rpx;height: 140rpx;"></image>
					</u-upload>
			</view>
		
		</view>
		</view>
		<view class="btn" @click="confirm">
			提交
		</view>
		<zero-loading v-if="loading == true" type="gear" mask="true" maskOpacity="0.3"></zero-loading>
		
	</view>
</template>

<script>
	import lzcPicker from '@/components/lzc-picker/lzc-picker.vue'
	export default{
		components: {
			lzcPicker
		},
		data(){
			return{
				loading    : false,
				proveShow:false,
				upBaseUrl:this.$http.baseUrl,
				form:{
					bank_no: '',
					bank_opening: '',
					bank_account_name:'',
					collecting_prove: [],
					bank_card_image: [],
					bank_id: 0,
					apply_note:''
				},
				bankList:[],
				bankText: '',
				showCatePop: false
			}
		},
		onLoad(e){
			this.getBankList();
		},
		methods:{
			getBankList(){
				this.$http.getBankList({}).then(res => {
					if (res.code == 1 && res.data) {
						this.bankList = res.data;
					}
				});
			},
		
			bindPickerChange1(e){
				this.form.bank_id = e.id;
				this.bankText = e.name;
			},
			confirm(){
				let list = []
				this.$http.applyUpdateBank(this.form).then(res=>{
					
						if(res.code == 1){
							setTimeout(function () {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								uni.navigateBack()
							}, 1500);
						}else{
							if(res.msg == '非本人银行卡请上传代收凭证'){
								this.proveShow = true;
							}
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
			},
			showPop(){
				this.$refs.lzcPicker.handleShow()
			},
			// 删除图片
				deletePic(event) {
					this.form[`${event.name}`].splice(event.index, 1)
				},
			      // 新增图片
			      async afterRead(event) {
			        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			        let lists = [].concat(event.file)
			        let fileListLen = this.form[`${event.name}`].length
			        lists.map((item) => {
			          this.form[`${event.name}`].push({
			            ...item,
			            status: 'uploading',
			            message: '上传中'
			          })
			        })
			        for (let i = 0; i < lists.length; i++) {
			          const result = await this.uploadFilePromise(lists[i].url)
			          
			          let item = this.form[`${event.name}`][fileListLen]
			          this.form[`${event.name}`].splice(fileListLen, 1, Object.assign(item, {
			            status: 'success',
			            message: '',
			            url    :result
			          }))
			          fileListLen++;
			        }
			
			      },
				uploadFilePromise(url) {
					this.loading = true;
					return new Promise((resolve, reject) => {
						let a = uni.uploadFile({
							url: this.upBaseUrl + 'common/uploadImg',
							filePath: url,
							name: 'file',
							header: {
								'TOKEN': uni.getStorageSync('token')
							},
							formData: {},
							success: (res) => {
								setTimeout(() => {
									this.loading = false;
									resolve(JSON.parse(res.data).data.full_url)
								}, 1000)
							}
						});
					})
				},
		}
	}
</script>

<style lang="scss" scoped>
	input {
	  font-size: 0.72rem!important; /* 设置你想要的字体大小 */
	}
	.main{
		background-color: #f6f6f6;
		min-height: 100vh;
		border-top: 1rpx solid #f6f6f6;
	}
	.form{
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		position: relative;
		background-color: #fff;
		width: 690rpx;
		border-radius: 20rpx;
		margin: 20rpx auto 0rpx;
		box-shadow: 0rpx 0rpx 10rpx 20rpx rgba(0, 0, 0, .02);
		.item{
			position: relative;
			height: 80rpx;
			align-items: center;
			.name{
				margin-right: 20rpx;
				white-space: nowrap;
			}
			input{
				border-bottom: 1rpx solid #eee;
				flex: 1;
				text-align: right;
				padding-right: 30rpx;
				height: 80rpx;
				&::placeholder{
					color: #f00;
				}
			}
			picker{
				flex: 1
			}
			uni-icons{
				position: absolute;
				right: -10rpx;
			}
		}
		.goods{
			padding: 10rpx 0;
			border-radius: 10rpx;
			background-color: #f7b50020;
			.items{
				font-size: 24rpx;
				padding: 10rpx 20rpx;
				color: #666;
				align-items: center;
				.name{
					white-space: nowrap;
				}
				input{
					margin-left: 15rpx;
					text-align: center;
					background-color: #fff;
				}
				.del{
					min-width: 32rpx;
					width: 32rpx;
					height: 32rpx;
					margin-left: 10rpx;
				}
			}
		
		}
	}
	.btn{
		width: 690rpx;
		height: 80rpx;
		color: #fff;
		background-color: #3784ff;
		text-align: center;
		line-height: 80rpx;
		margin: 100rpx auto;
		border-radius: 10rpx;
	}
</style>